<template>
  <div
    class="mainsec-container"
    :style="{
      background: `url(${img}) no-repeat center/cover`,
      paddingLeft: p + 'vw',
      paddingRight: p + 'vw',
    }"
  >
    <div class="little-title">
      <span v-for="(item, i) in littleTitle" :key="i">
        {{ item }}
      </span>
    </div>
    <div class="main-title">工业互联网安全应急行业公共服务平台</div>
    <el-button type="primary" class="button" @click="clickHandler"
      >立即体验</el-button
    >
    <div class="tiny-text">
      <span v-for="(item, i) in tinyTitle" :key="i"> {{ item }}</span>
    </div>
  </div>
</template>

<script>
import img from "@/assets/data/exports/头图@1x.png";
export default {
  props: {
    p: {
      default: 6,
    },
  },
  data() {
    return {
      img,
      littleTitle: ["数据助力", "平台支撑", "产业链共建共享"],
      tinyTitle: [
        "政策决策支撑",
        "产业发展引导",
        "企业产品赋能",
        "生态资源汇聚",
      ],
    };
  },
  methods: {
    clickHandler() {
      location = "http://182.151.11.69:30000/#/home";
    },
  },
};
</script>

<style lang="scss" scoped>
.mainsec-container {
  $background-height: 366px;
  width: 100%;
  height: $background-height;
  padding: 60px;
  position: relative;
  .little-title {
    font-size: 25px;
    span {
      margin-right: 15px;
    }
  }
  .main-title {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .button {
    font-size: 16px;
    width: 8em;
    height: 50px;
    // margin-bottom: 50px;
  }

  $tiny-color: #706f6f;
  .tiny-text {
    position: absolute;
    bottom: 60px;
    span {
      display: inline-block;
      font-size: 15px;
      color: $tiny-color;
      padding: 0 10px;
      border-left: 1px solid $tiny-color;
      &:first-child {
        border: none;
        padding-left: 0;
      }
    }
  }
}
</style>
